<template>
    <div class="page-demo-table-base">
        <div class="main-page-content">
            <ContentHeader title="这里是功能点度量页面" explain="在本页面设置您的各类功能点数量与系统特征，将根据功能点度量的方法为您得出系统的规模度量结果">

            </ContentHeader>

            <div class="page-content">


                <template>
                    <span style="font-size: large;">计算未调整功能点数</span>
                    <a-divider />
                    <a-table :columns="columns" :data-source="data" bordered :pagination="false">
                        <template v-for="col in ['simple', 'average', 'complex']" :slot="col"
                            slot-scope="text, record, index">
                            <div :key="col">
                                <a-input v-if="record.editable" style="margin: -5px 0" :value="text"
                                    @change="e => handleChange(e.target.value, record.key, col)" />
                                <template v-else>
                                    {{ text }}
                                </template>
                            </div>
                        </template>
                        <template slot="operation" slot-scope="text, record, index">
                            <div class="editable-row-operations">
                                <span v-if="record.editable">
                                    <a @click="() => save(record.key)">Save</a>
                                    <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
                                        <a>Cancel</a>
                                    </a-popconfirm>
                                </span>
                                <span v-else>
                                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a>
                                </span>
                            </div>
                        </template>
                    </a-table>
                    <span>计算得到UFC为：{{ ufc }}</span>
                </template>
                <a-divider />

            </div>
            <div class="page-content">
                <span style="font-size: large;">计算调整因子</span>
                <a-divider />
                <a-table :columns="columns1" :data-source="data1" bordered :pagination="false">
                    <template v-for="col in ['rank']" :slot="col" slot-scope="text, record, index">
                        <div :key="col">
                            <a-input v-if="record.editable" style="margin: -5px 0" :value="text"
                                @change="e => handleChange1(e.target.value, record.key, col)" />
                            <template v-else>
                                {{ text }}
                            </template>
                        </div>
                    </template>
                    <template slot="operation" slot-scope="text, record, index">
                        <div class="editable-row-operations">
                            <span v-if="record.editable">
                                <a @click="() => save1(record.key)">Save</a>
                                <a-popconfirm title="Sure to cancel?" @confirm="() => cancel1(record.key)">
                                    <a>Cancel</a>
                                </a-popconfirm>
                            </span>
                            <span v-else>
                                <a :disabled="editingKey1 !== ''" @click="() => edit1(record.key)">Edit</a>
                            </span>
                        </div>
                    </template>
                </a-table>
                <span>计算出VAF为：{{ vaf }}</span>
            </div>

            <div class="page-content">
                <a-divider />
                <span style="font-size: larger;font-weight: 1000;">本项目功能点度量结果为：{{ vaf * ufc }}</span>
            </div>
            <ContentFooter explain="功能点度量方法是利用软件需求分析度量软件规模。">
                <div class="helpnote">
                    <div>
                        1. 功能点的计算：<br />
                        （1）未调整功能点计数UFC=求和（某项目的数量×其对应的权重因子）<br />
                        （2）调整因子VAF=0.65+0.01*（14个影响因子之和）<br />
                        （3）调整后功能点数FP=UFC*VAF<br />
                    </div>
                    <div>
                        2. 功能点度量的应用：<br />
                    预测软件规模、计算缺陷密度、估算软件工作量、估算软件成本、计划开发时间、计划人员安排<br />
                    </div>

                </div>
            </ContentFooter>
        </div>
    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";
import ContentFooter from "@/components/content_footer/content_footer";
const columns = [
    {
        title: '测量元素',
        dataIndex: 'name',
        width: '30%',
        align: 'center',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: 'Simple',
        dataIndex: 'simple',
        width: '15%',
        align: 'center',
        scopedSlots: { customRender: 'simple' },
    },
    {
        title: 'Average',
        dataIndex: 'average',
        align: 'center',
        width: '15%',
        scopedSlots: { customRender: 'average' },
    },
    {
        title: 'Complex',
        dataIndex: 'complex',
        align: 'center',
        width: '15%',
        scopedSlots: { customRender: 'complex' },
    },
    {
        title: 'Operation',
        dataIndex: 'operation',
        align: 'center',
        scopedSlots: { customRender: 'operation' },
    },
];
const columns1 = [
    {
        title: '序号',
        dataIndex: 'order',
        width: '10%',
        align: 'center',
        scopedSlots: { customRender: 'order' },
    },
    {
        title: '技术复杂度因子',
        dataIndex: 'name',
        width: '50%',
        align: 'center',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: '影响程度',
        dataIndex: 'rank',
        align: 'center',
        width: '15%',
        scopedSlots: { customRender: 'rank' },
    },
    {
        title: 'Operation',
        dataIndex: 'operation',
        align: 'center',
        scopedSlots: { customRender: 'operation' },
    },
];
const data = [];
const titles = ['外部输入', '外部输出', '外部查询', '内部文件', '外部接口']
for (let i = 0; i < 5; i++) {
    data.push({
        key: i.toString(),
        name: titles[i],
        simple: 0,
        average: 0,
        complex: 0
    });
};
const data1 = [];
const titles1 = ['可靠的备份与恢复', '数据通信', '分布式的功能', '性能', '大量使用的配置', '在线数据入口', '易操作性', '在线更新', '复杂接口', '复杂处理', '可重用性', '易安装性', '多场所', '容易变更']
for (let i = 0; i < 14; i++) {
    data1.push({
        key: ((i + 5) * 2).toString(),
        order: i + 1,
        name: titles1[i],
        rank: 3
    });
}
export default {
    components: {
        ContentHeader,
        ContentFooter
    },
    data() {
        this.cacheData = data.map(item => ({ ...item }));
        this.cacheData1 = data1.map(item => ({ ...item }));
        return {
            data,
            columns,
            editingKey: '',
            data1,
            columns1,
            editingKey1: '',
        };
    },
    computed: {
        ufc: function () {
            let count = 0;
            for (let i = 0; i < 5; i++) {
                if (data[i].name == '外部输入') {
                    count = count + data[i].simple * 3 + data[i].average * 4 + data[i].complex * 6
                } else if (data[i].name === '外部输出') {
                    count = count + data[i].simple * 4 + data[i].average * 5 + data[i].complex * 7
                } else if (data[i].name == '外部查询') {
                    count = count + data[i].simple * 3 + data[i].average * 4 + data[i].complex * 6
                } else if (data[i].name == '内部文件') {
                    count = count + data[i].simple * 5 + data[i].average * 7 + data[i].complex * 10
                } else if (data[i].name == '外部接口') {
                    count = count + data[i].simple * 7 + data[i].average * 10 + data[i].complex * 15
                }
            }
            return count
        },
        vaf: function () {
            let count = 0
            for (let i = 0; i < 14; i++) {
                count = count + Number(data1[i].rank)
                console.log(count)
            }
            return 0.65 + 0.01 * count
        }
    },
    methods: {
        handleChange(value, key, column) {
            const newData = [...this.data];
            const target = newData.filter(item => key === item.key)[0];
            if (target) {
                target[column] = value;
                this.data = newData;
            }
        },
        edit(key) {
            const newData = [...this.data];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey = key;
            if (target) {
                target.editable = true;
                this.data = newData;
            }
        },
        save(key) {
            const newData = [...this.data];
            const newCacheData = [...this.cacheData];
            const target = newData.filter(item => key === item.key)[0];
            const targetCache = newCacheData.filter(item => key === item.key)[0];
            if (target && targetCache) {
                delete target.editable;
                this.data = newData;
                Object.assign(targetCache, target);
                this.cacheData = newCacheData;
            }
            this.editingKey = '';
        },
        cancel(key) {
            const newData = [...this.data];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey = '';
            if (target) {
                Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
                delete target.editable;
                this.data = newData;
            }
        },
        handleChange1(value, key, column) {
            const newData = [...this.data1];
            const target = newData.filter(item => key === item.key)[0];
            if (target) {
                target[column] = value;
                this.data1 = newData;
            }
        },
        edit1(key) {
            const newData = [...this.data1];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey1 = key;
            if (target) {
                target.editable = true;
                this.data1 = newData;
            }
        },
        save1(key) {
            const newData = [...this.data1];
            const newCacheData = [...this.cacheData1];
            const target = newData.filter(item => key === item.key)[0];
            const targetCache = newCacheData.filter(item => key === item.key)[0];
            if (target && targetCache) {
                delete target.editable;
                this.data1 = newData;
                Object.assign(targetCache, target);
                this.cacheData1 = newCacheData;
            }
            this.editingKey1 = '';
        },
        cancel1(key) {
            const newData = [...this.data1];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey1 = '';
            if (target) {
                Object.assign(target, this.cacheData1.filter(item => key === item.key)[0]);
                delete target.editable;
                this.data1 = newData;
            }
        },
    },
};
</script>

<style lang="less" scoped>
@import "./base.less";

.editable-row-operations a {
    margin-right: 8px;
}
</style>